<template>
	<view>
		<!-- 展示活动列表按照最新时间展示 -->
		<view class="notice-item">
			<text class="time">11:30</text>
			<view class="content">
				<text class="title">社区义卖</text>
				<view class="img-wrapper"><image class="pic" src="http://pic.wehefei.com/0/03/16/38/3163863_919530.jpg"></image></view>
				<text class="introduce">
					为弘扬扶贫济困、乐善好施的传统美德，***社区开展“奉献爱心·传递温情”公益义卖活动。
					活动当天，志愿者们热情高涨，早早地不约而同来到社区开始准备。有的将义卖物进行分类，有的抬桌设摊、摆放货物，有的向过路群众讲解宣传，义卖活动今晚将拉开帷幕.....
				</text>
				<text class="introduce">报名人数：88</text>
				<button type="default" style="color: #E54D42;background-color:#F1F1F1;" @click="joinActivity">报名</button>
				<!-- 倒计时 -->
				<!-- <text class="introduce" >活动剩余时间</text> -->
				活动剩余时间
				<uni-countdown color="#E54D42" background-color="#F1F1F1" border-color="#00B26A" :day="1" :hour="2" :minute="30" :second="0"></uni-countdown>
			</view>
		</view>
		<view class="notice-item">
			<text class="time">昨天 12:30</text>
			<view class="content">
				<text class="title">社区志愿者活动</text>
				<view class="img-wrapper">
					<image class="pic" src="http://img2.imgtn.bdimg.com/it/u=31892388,2469352670&fm=26&gp=0.jpg"></image>
					<view class="cover">活动结束</view>
				</view>
			</view>
		</view>
		<view class="notice-item">
			<text class="time">2019-07-26 12:30</text>
			<view class="content">
				<text class="title">社区体育运动</text>
				<view class="img-wrapper">
					<image class="pic" src="http://img2.imgtn.bdimg.com/it/u=2788209572,3947113746&fm=214&gp=0.jpg"></image>
					<view class="cover">活动结束</view>
				</view>
				<text class="introduce">新品上市全场2折起，新品上市全场2折起，新品上市全场2折起，新品上市全场2折起，新品上市全场2折起</text>
			</view>
		</view>
	</view>
</template>

<script>
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
export default {
	components: {
		uniCountdown
	},
	data() {
		return {};
	},
	methods: {
		joinActivity() {
			this.$api.msg('报名成功，请注意查看个人消息通知')
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
	padding-bottom: 30upx;
}

.notice-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.time {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80upx;
	padding-top: 10upx;
	font-size: 26upx;
	color: #7d7d7d;
}

.content {
	width: 710upx;
	padding: 0 24upx;
	background-color: #fff;
	border-radius: 4upx;
}

.title {
	display: flex;
	align-items: center;
	height: 90upx;
	font-size: 32upx;
	color: #303133;
}

.img-wrapper {
	width: 100%;
	height: 260upx;
	position: relative;
}

.pic {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 6upx;
}

.cover {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	font-size: 36upx;
	color: #fff;
}

.introduce {
	display: inline-block;
	padding: 16upx 0;
	font-size: 28upx;
	color: #606266;
	line-height: 38upx;
}

.bot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80upx;
	font-size: 24upx;
	color: #707070;
	position: relative;
}

.more-icon {
	font-size: 32upx;
}
</style>
